<script setup>
import TimerCard from '../components/TimerCard.vue';
import Weather from "../components/Weather.vue";
import TodoList from "../components/TodoList.vue";
import AddTasks from "../components/AddTasks.vue";
import Date from '../components/Date.vue';
import Epigram from '../components/Epigram.vue';
</script>
<script>
export default { name: 'index' }
</script>
<template>
    <div>
        <header
            class="animate__animated animate__fadeInDown py-4 px-40 rounded-b-[4rem] rounded bg-white"
        >
            <div>
                <div
                    class="inline-block w-14 h-14 mr-5 rounded-full bg-slate-300 text-center text-2xl leading-[3.5rem]"
                >Q</div>
                <span class="text-3xl">Hi,Qiu</span>
                <button>QAQ</button>
                <button>QAQ</button>
            </div>
        </header>
        <Epigram></Epigram>
        <main class="px-40 mt-10 flex justify-between">
            <article class="w-[55%] overflow-hidden mr-10">
                <TimerCard></TimerCard>
            </article>
            <div class="flex flex-1 items-start justify-between flex-wrap">
                <aside class="rounded-3xl">
                    <Date></Date>
                </aside>
                <aside class="rounded-3xl bg">
                    <Weather></Weather>
                </aside>
                <aside
                    class="bg-white self-stretch animate__animated animate__fadeIn animate__slower rounded-3xl w-full p-5"
                >
                    <TodoList></TodoList>
                </aside>
            </div>
        </main>
        <footer
            class="mb-10 absolute left-0 right-0 bottom-0 px-40 text-3xl text-center animate__animated animate__fadeInUp"
        >TODO list</footer>
    </div>
</template>